<template>
    <div class="home">
        <div :style="{ height: wHeight }" class="video-box">
            <div class="fn">
                <div></div>
                <div class="text">HDC 一键装机</div>
                <div>
                    <Btnone />
                </div>
                <div class="power">
                    <div class="power-text">POWERED BY</div>
                    <div>
                        <Power />
                    </div>
                </div>
            </div>
            <video class="video" autoplay muted loop>
                <source :src="video_url" type="video/mp4" />
            </video>
        </div>
        <div class="info-box">
            <div class="text">化繁为简，一键装机</div>

            <div class="card">
                <Card v-for="(item, index) in CardInfo" :key="index" :title="item.title" :content="item.content" />
            </div>
        </div>
        <div class="color-box">
            <Color />
        </div>
        
        <AICard />
    </div>

</template>

<script setup lang="ts">
import { ref, watch, onMounted } from "vue";
import Btnone from "./components/Btn_one.vue";
import Power from "./components/Power.vue";
import Card from "./components/Card.vue";
import Color from "./components/Color.vue"
import AICard from "./components/AICard.vue";
import { getHomeCard } from "@/server/home/http";
import type { HomeCard } from "./type";

const video_url = ref(
    "https://hdc-res-2023-1317708264.cos.ap-guangzhou.myqcloud.com/video%2Fhome.mp4"
);

const CardInfo = ref<HomeCard[]>([]);

onMounted(async () => {
    CardInfo.value = await getHomeCard();

});

import { useWindowSize } from "@vueuse/core";

const { height } = useWindowSize();
const wHeight = ref(height.value - 70 + "px");
// console.log(wHeight.value);

// 使用 watch 函数监视 count 的变化
watch(height, (newValue) => {
    // console.log(`count 变化了：从 ${oldValue} 到 ${newValue}`);
    wHeight.value = newValue - 70 + "px";
});
</script>

<style scoped lang="scss">
.home {
    width: 100%;

    .video-box {
        position: relative;
        top: 0;
        left: 0;
        width: 100%;
        overflow: hidden;

        .fn {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            align-items: center;
            background: rgba(0, 0, 0, 0.4);
            z-index: 1;

            .text {
                background-image: linear-gradient(to right, #4facfe 0%, #00f2fe 100%);
                -webkit-background-clip: text;
                background-clip: text;
                color: transparent;
                font-size: 50px;
                font-weight: 700;
                letter-spacing: 4px;
            }

            .power {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;

                font-size: 20px;
                font-weight: 600;
                background-image: linear-gradient(to right, #4facfe 0%, #00f2fe 100%);
                -webkit-background-clip: text;
                background-clip: text;
                color: transparent;

                .power-text {
                    margin-bottom: 30px;
                }
            }
        }

        .video {
            width: 100%;
        }
    }

    .info-box {
     
        .card {
            display: flex;
            justify-content: space-around;
            align-items: center;
            flex-wrap: wrap;
            margin-top: 50px;
        }

        .text {
            font-size: 50px;
            font-weight: 700;
            text-align: center;
            margin-top: 70px;
            background-image: linear-gradient(to right, #00dbde 0%, #fc00ff 100%);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }
    }

    .color-box {
        height: 600px // background-color: #00dbde;
    }
}

::v-deep .el-card__header {
    border-bottom: none;
}

::v-deep .el-card__footer {
    border-top: none;
}
</style>
